<template>
    <div class="tnxbs-progress">
        <BProgress :variant="type" :key="type" :value="value" :max="max" :show-value="showValue">
            <div class="progress-bar" :style="{width: percent}">
                {{ showProgress ? percent : '' }}
            </div>
        </BProgress>
        <span class="tnxbs-progress-value" v-if="showValue">{{ value }}/{{ max }}</span>
    </div>
</template>

<script>
import {BProgress} from 'bootstrap-vue-next';

export default {
    name: 'TnxbsvProgress',
    components: {BProgress},
    props: {
        type: String,
        value: {
            type: Number,
            default: 0
        },
        max: Number,
        precision: {
            type: Number,
            default: 0,
        },
        showValue: Boolean,
        showProgress: Boolean,
    },
    data() {
        return {};
    },
    computed: {
        percent() {
            return (this.value / this.max).toPercent(this.precision);
        }
    },
    methods: {}
}
</script>

<style>
.tnxbs-progress {
    display: flex;
    align-items: center;
}

.tnxbs-progress .progress {
    flex-grow: 1;
}

.tnxbs-progress .tnxbs-progress-value {
    margin-left: 0.5rem;
    color: var(--bs-body-color);
}
</style>
